<template>
  <div class="container">
    <el-card class="box-card">
      <el-form :inline="true" class="demo-form-inline" style="padding-left:30px;">
        <el-row justify="space-between">
          <el-col :span="20" >
            <el-form-item label="关键字">
              <el-input
                v-model="keyword"
                placeholder="根据编号搜索"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item style="text-align: right">
              <el-button type="default" @click="keyword = ''">清除</el-button>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 条数 -->
      <QuestionsPagetool :counts="page.counts" />
      <!-- 表格 -->
      <el-table
        :data="tabelData"
        style="width: 100%"
        :header-cell-style="{ backgroundColor: '#fafafa' }"
      >
        <el-table-column prop="id" label="编号" width="200">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="80">
        </el-table-column>
        <el-table-column label="题目编号" width="260">
          <template v-slot="{ row }">
            <div class="cell">
              <div v-for="item in row.questionIDs" :key="item.number">
                <el-link :underline='false' type="primary" @click="lookRandom(item.id)">{{ item.number }}</el-link>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="addTime"
          label="录入时间"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="totalSeconds"
          label="答题时间(s)"
          width="140"
        >
        </el-table-column>
        <el-table-column
          prop="accuracyRate"
          label="正确率(%)"
          width="140"
        >
        </el-table-column>
        <el-table-column prop="userName" label="录入人" width="140"> </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <div class="btn">
              <el-button
                type="danger"
                icon="el-icon-delete"
                plain
                circle
                @click="removeRandom(row.id)"
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <MyPagination
        :page="page"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </el-card>
    <QuestionsPreview ref="QuestionsPreview" :questionVisible.sync="questionVisible"/>
  </div>
</template>

<script>
import QuestionsPagetool from '../components/questions-pagetool.vue'
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
import QuestionsPreview from '../components/questions-preview.vue'
export default {
  components: { QuestionsPagetool, QuestionsPreview },
  data () {
    return {
      keyword: '',
      page: {
        page: 1,
        pagesize: 20,
        counts: 0
      },
      tabelData: [],
      questionVisible: false
    }
  },
  created () {
    this.randoms()
  },
  methods: {
    // 渲染
    async randoms () {
      const { data } = await randoms(this.page)
      this.tabelData = data.items
      this.page.counts = data.counts
    },
    // 条数发生变化
    handleSizeChange (val) {
      this.page.pagesize = val
      this.randoms()
    },
    // 页数发生变化
    handleCurrentChange (val) {
      this.page.page = val
      this.randoms()
    },
    // 搜索
    async onSubmit () {
      const { data } = await randoms({ keyword: this.keyword, ...this.page })
      this.tabelData = data.items
      this.page.counts = data.counts
    },
    // 删除
    async removeRandom (id) {
      try {
        await this.$confirm('确定删除吗？', '提示')
        await removeRandoms({ id })
        this.$message.success('删除成功')
        this.randoms()
      } catch (e) {
        console.log(e)
      }
    },
    // 查看
    lookRandom (id) {
      console.log(id)
      this.questionVisible = true
      this.$refs.QuestionsPreview.id = id
    }
  }
}
</script>

<style scoped lang='less'>
  .container {
    margin: 10px 0;
    padding: 0 10px;
    .el-table {
      margin-bottom: 20px;
    }
  }
</style>
